<template>
  <div class="detail-info">
    <div class="levi-top">
      <div class="goods-img" style="width: 300px; height: 300px;">
        <img v-if="theGoodsDetail.img" :src="url + theGoodsDetail.img" width="300" height="300">
      </div>
      <div :class="[{ 'fixed-top': scrollSpecifiedPosition },'collect-content']">
        <p class="detail">商品详情</p>
        <div class="collect" v-if="!theGoodsDetail.fav" :style="styleSelected" @click="collect()">
          <span>收藏</span>
        </div>
        <div class="collect" v-else :style="notSelected" @click="collect()">
          <span>取消收藏</span>
        </div>
      </div>
    </div>
    <dl :class="[{ 'new-detail-style': scrollSpecifiedPosition },'details']">
      <dt>{{theGoodsDetail.name}}&nbsp;{{theGoodsDetail.year}}</dt>
      <dl class="clear">
        <dd class="base-info">酒庄出厂价：<span v-if="userName">{{theGoodsDetail.o_price}}</span><span v-else>登录可见</span></dd>
        <dd class="base-info">到港完税价：<span v-if="userName">{{theGoodsDetail.price}}</span><span v-else>登录可见</span></dd>
        <dd class="base-info">库存：{{theGoodsDetail.inv}}</dd>
        <dd class="base-info">起订量：{{theGoodsDetail.toast}}</dd>
        <dd class="base-info">包装：{{theGoodsDetail.box}}</dd>
        <dd class="base-info">规格(ml)：{{theGoodsDetail.vol}}</dd>
      </dl>
      <dt>基本信息</dt>
      <dd>产区：{{theGoodsDetail.chanqu}}</dd>
      <dd>等级：{{theGoodsDetail.grade}}</dd>
      <dd>品类：{{theGoodsDetail.pinzhong}}</dd>
      <dt>供应商</dt>
      <dd>{{theGoodsDetail.provider}}</dd>
      <dt>奖项/评分</dt>
      <dd>{{theGoodsDetail.prize}}</dd>
    </dl>
    <div class="footer">
      <router-link to="/">
        <img src="../assets/picture/index.png" width="29" height="29">
        <span>首页</span>
      </router-link>
      <a href="http://www.finewest.cn/goods_cart1.htm">
        <div class="cart">
          <img src="../assets/picture/shopping-cart.png" width="29" height="29">
          <span v-if="theGoodsDetail.cart > 0" class="shopping-cart">{{theGoodsDetail.cart}}</span>
        </div>
        <span>购物车</span>
      </a>
      <span class="add-goods" @click="addGoods()">加入购物车</span>
    </div>
    <toast ref="toast"></toast>
  </div>
</template>
<script>
  import {getCookie} from '../common/cookie'

  import toast from '../components/toast'

  import selected from '../assets/picture/selected.png'
  import notSelected from '../assets/picture/not-selected.png'
  export default{
    name: 'detail',
    data () {
      return {
        styleSelected: {
          backgroundImage: 'url(' + notSelected + ')',
          backgroundSize: '54px 34px',
          backgroundRepeat: 'no-repeat'
        },
        notSelected: {
          backgroundImage: 'url(' + selected + ')',
          backgroundSize: '54px 34px',
          backgroundRepeat: 'no-repeat'
        },
        url: 'http://www.finewest.cn',
        userName: getCookie('USER_NAME') ? getCookie('USER_NAME') : this.$utils.getQueryStringByName('userName'),
        theGoodsDetail: {},
        goodsId: this.$utils.getQueryStringByName('id'),
        scrollSpecifiedPosition: false
      }
    },
    components: {
      toast
    },
    created () {
      this.goodsDetail()
    },
    mounted () {
      window.addEventListener('scroll', this.goodsDetailScroll)
    },
    methods: {
      goodsDetail () {
        console.log(this.userName)
        this.$http({
          method: 'post',
          url: this.url + '/m/goodsDetail.htm',
          params: {'id': this.goodsId, 'userName': this.userName},
          headers: {'USER_NAME': this.userName},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.theGoodsDetail = response.data
        }, function () {
          console.log('获取数据失败')
        })
      },
      addGoods () {
        if (!this.userName) {
          this.$refs.toast.toastFun('请先登录', 3000, function () {
          })
        } else {
          this.$http({
            method: 'post',
            url: this.url + '/m/addCart.htm',
            params: {'id': this.goodsId, 'userName': this.userName},
            headers: {},
            emulateJSON: true
          }).then(function (response) {
            response = JSON.parse(response.bodyText)
            if (response.succ) {
              this.theGoodsDetail.cart = response.cart
            }
          }, function () {
            this.$refs.toast.toastFun('加入购物车失败', 3000, function () {
            })
          })
        }
      },
      collect () {
        if (!this.userName) {
          this.$refs.toast.toastFun('请先登录', 3000, function () {
          })
        } else {
          this.$http({
            method: 'post',
            url: this.url + '/m/favGoods.htm',
            params: {'id': this.goodsId, 'userName': this.userName},
            headers: {},
            emulateJSON: true
          }).then(function (response) {
            response = JSON.parse(response.bodyText)
            if (response.succ) {
              this.theGoodsDetail.fav = !this.theGoodsDetail.fav
            }
          }, function () {
            this.$refs.toast.toastFun('收藏失败', 3000, function () {
            })
          })
        }
      },
      goodsDetailScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        console.log(scrollTop)
        if (scrollTop > 300) {
          this.scrollSpecifiedPosition = true
        } else {
          this.scrollSpecifiedPosition = false
        }
      }
    },
    destroyed () {
      window.removeEventListener('scroll', this.goodsDetailScroll)
    }
  }
</script>
<style scope lang="scss">
  $detail-color:#444444;
  $dt-color: #000000;
  html {
    min-height: calc(100% + 301px);
    height: calc(100% + 301px);
  }
  body{
    min-height: 100%;
    height: 100%;
  }
  .detail-info{
    margin-bottom: 69px;
    .levi-top{
      width: 100%;
      z-index: 9;
      background: #ffffff;
      .goods-img{
        display: table;
        margin: 0 auto;
        img{
          display: inherit;
        }
      }
      .collect-content.fixed-top{
        position: fixed;
        top: 0;
        border-top: none;
        width: 100%;
        background: #ffffff;
      }
      .collect-content{
        border-bottom: 1px solid #bbbbbb;
        border-top: 1px solid #bbbbbb;
        overflow: hidden;
        p.detail{
          height: 34px;
          width: calc(100% - 54px);
          float: left;
          line-height: 34px;
          font-size: 18px;
          text-align: center;
          color: $detail-color;
        }
        .collect{
          float: left;
          width: 54px;
          height: 34px;
          position: relative;
          span{
            display: block;
            text-align: center;
            font-size: 12px;
            height: 100%;
            line-height: 50px;
            color: $detail-color;
          }
          :after{
            content: '';
            display: block;
            width: 1px;
            height: 17px;
            position: absolute;
            left: -1px;
            top: 9px;
            background: #bbbbbb;
          }
        }
      }
    }
    dl.new-detail-style.details{
      margin-top: 50px;
    }
    dl.details{
      margin: 0px 12px 0;
      dt{
        color: #000000;
        font-size: 18px;
        margin: 15px 0 11px;
        line-height: 18px;
      }
      dd{
        font-size: 14px;
        color: $detail-color;
        margin: 11px 0;
        line-height: 14px;
      }
      dl.clear{
        margin: -11px 0;
        dd.base-info{
          width: calc(50% - 12px);
          float: left;
          span{
            color: #e92d46;
            font-size: 14px;
            line-height: 14px;
          }
        }
        &::after{
           content: '\0020';
           display: block;
           height: 0;
           clear: both;
        }
      }
    }
    .footer{
      height: 49px;
      border-top: 1px solid #dddddd;
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 9;
      background: #ffffff;
      a{
        width: 75px;
        height: 100%;
        display: block;
        float: left;
        .cart{
          position: relative;
          display: table;
          margin: 0 auto;
          span{
            position: absolute;
            top:0;
            right: -5px;
            display: block;
            height: 15px;
            width: 15px;
            text-align: center;
            line-height: 16px;
            color: #ffffff;
            font-size: 12px;
            background: url('../assets/picture/goods-number2.png') no-repeat;
            background-size: 15px 15px;
          }
        }
        img{
          display: inherit;
          margin: 3px auto 0;
        }
        span{
          display: table;
          margin: 0 auto;
        }
      }
      span.add-goods{
        float: left;
        display: block;
        width: calc(100% - 150px);
        height: 100%;
        text-align: center;
        line-height: 49px;
        background: #e92d46;
        color: #ffffff;
        font-size: 17px;
      }
    }
  }
</style>
